// 在 JavaScript 文件中可以使用 import 命令直接引入 SCSS 文件，webpack 会在编译时自动将其编译并注入到 HTML 中，使得该 SCSS 样式表生效。这样做能够方便我们在开发中使用 SCSS 语法，并且使得我们的代码更加模块化和组织化，方便管理和维护。

// 需要注意的是，JavaScript 文件与 SCSS 文件本质上是不同类型的资源，而 JavaScript 语言并不直接支持 SCSS 语法。实际上，通过 loader 等工具的处理，可以使得我们在 JavaScript 文件中使用部分 SCSS 语法，但仍然需要通过构建工具进行处理和编译
import './sass/index.scss'
import './iconfont/iconfont.css'


import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'

// 轮播图
import 'swiper/swiper-bundle.css'
import Swiper, {
  Navigation,
  Pagination,
  EffectFade,
  Autoplay
} from 'swiper'
Swiper.use([Navigation, Pagination, EffectFade, Autoplay])
var mySwiper = new Swiper('.swiper', {
  loop: true, // 循环模式选项
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
var swiper = new Swiper(".mySwiper", {
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },


});
// 倒计时
import {
  shijiancha
} from './util';

let date2 = new Date('2023-12-12 10:00:00')
let span1 = document.querySelector('.span1')
let span2 = document.querySelector('.span2')
let span3 = document.querySelector('.span3')
let span4 = document.querySelector('.span4')
let span5 = document.querySelector('.span5')
span1.innerHTML = `${new Date('2023-12-12 10:00:00').getHours()>=10?new Date('2023-12-12 10:00:00').getHours():'0'+new Date('2023-12-12 10:00:00').getHours()}`
span2.innerHTML = `${new Date('2023-12-12 10:00:00').getMinutes()>=10?new Date('2023-12-12 10:00:00').getMinutes():'0'+new Date('2023-12-12 10:00:00').getMinutes()}`
setInterval(() => {
  let date1 = new Date()
  span3.innerHTML = `${shijiancha(date1, date2).hours>=10?shijiancha(date1, date2).hours:'0'+shijiancha(date1, date2).hours}`
  span4.innerHTML = `${shijiancha(date1, date2).minutes>=10?shijiancha(date1, date2).minutes:'0'+shijiancha(date1, date2).minutes}`
  span5.innerHTML = `${shijiancha(date1, date2).seconds>=10?shijiancha(date1, date2).seconds:'0'+shijiancha(date1, date2).seconds}`
}, 1000);
// 渲染导航
let one = document.querySelector('.one')
import axios from 'axios'
(async function () {
  let {
    data: {
      data
    }
  } = await axios.get('/api/goods/dataType')
  localStorage.setItem('dataType', JSON.stringify(data))
  one.innerHTML = data.map(item => {
    return `<li class="cate_menu_item" type_id="${item.id}">
    <a href="./html/list.html?cate_id=${item.id}">${item.type_name}</a>
</li>`
  }).join(' ')
})()
let left = document.querySelector('.nav .left')
let two = document.querySelector('.two')
import {
  getTarget
} from './common/util'
// 鼠标移入
left.onmouseover = (e) => {
  two.style.display = 'flex'
  one.style.overflow = 'auto'
  // 还得根据鼠标移入的分类筛选分类的子类
  let target = e.target;
  let t = getTarget(target, 'cate_menu_item');
  if (t) {
    let id = t.getAttribute('type_id');
    let dataType = JSON.parse(localStorage.getItem('dataType'));
    let sub_list = dataType.find(item => {
      return item.id == id;
    }).sub_list;

    // console.log(sub_list);
    // 渲染子类
    renderTwoMenu(id, sub_list)
  }
}

function renderTwoMenu(id, list) {
  two.innerHTML = list.map(item => {

    return `<span><a href="./html/list.html?cate_id=${id}&two_menu=${item.type_name}">
      ${item.type_name}
      <i class="iconfont icon-xiangyou1"></i>
  </a></span>`
  }).join('')
}
left.onmouseout = (e) => {
  two.style.display = 'none'
  one.style.overflow = 'hidden'
};

// 更多
let list = document.querySelector('.list')
// 节流
let flag = true;
// 立刻执行函数，开局申请一条商品数据
(async function () {
  let {
    data: {
      data,
      next_page
    }
  } = await axios.get('/api/goods/getData')
  localStorage.setItem('next_page', next_page)
  renderList(data)
  flag = true;
})();
// 滚动
window.onscroll = async () => {
  if (scrollY >= document.body.offsetHeight - innerHeight - 2 && flag == true) {
    console.log('到底了');
    flag = false;
    let page = localStorage.getItem('next_page')
    let {
      data: {
        data,
        next_page
      }
    } = await axios({
      url: '/api/goods/getData',
      params: {
        page: page
      }
    });
    localStorage.setItem('next_page', next_page)
    renderList(data)
    flag = true;
  }
}

// 渲染商品
function renderList(data) {
  list.innerHTML += data.map(item => {
    return `<div class="card list-item" goods_id="${item.goods_id}">
          <img src="${item.goods_small_logo}" class="card-img-top" alt="...">
          <div class="card-body">
          <p class="card-text">${item.goods_name}</p>
          <a href="javascript:viod(0);" class="">
              ￥ <b>${item.goods_price}</b>
          </a>
          </div>
      </div>`
  }).join('')
}
// 发送获取登录的用户信息请求
let login = document.querySelector('.login')
let user = document.querySelector('.user')
let register = document.querySelector('.register');
  (async function () {

    let {
      data
    } = await axios({
      url: '/api/user/me',
      headers: {
        "authorization": localStorage.getItem('token')
      }
    })
    if (data.code == 400) {
      login.style.display = 'flex';
      register.style.display = 'flex';
      user.style.display = 'none';
      return
    }
    login.style.display = 'none';
    user.style.display = 'flex';
    user.style.color = 'red';
    register.style.display = 'none'
    user.innerHTML += `欢迎 ${data.user_name}`;
  })()

list.onclick = (e) => {
  let target = e.target;
  if (!target.classList.contains('list')) {
      // 获取拥有list-item类名的元素
      let listItem = getTarget(target, 'list-item')
      let goods_id = listItem.getAttribute('goods_id')
      open(`./html/detail.html?goods_id=${goods_id}`)
  }
}